<template>
	<view class="g-loading" :class="[loadingClass]" :style="{'background':bgColr}">
		<view class="sk-circle" :class="loadingHide" v-if="type=='circle'">
			<view :class="`sk-circle${index+1} sk-child`" v-for="(item,index) in 12" :key='index'></view>
		</view>
		<view class="blow" :class="loadingHide" v-if="type=='blow'">
			<view :class="`bounce${index+1}`" v-for="(item,index) in 3" :key='index'></view>
		</view>
		<view class="organ" :class="loadingHide" v-if="type=='organ'">
			 <view :class="`rect${index+1}`" v-for="(item,index) in 5" :key='index'></view>
		</view>
		<view class="cube" :class="loadingHide" v-if="type=='cube'">
		  <view :class="`sk-cube${index+1} sk-cube`" v-for="(item,index) in 4" :key='index'></view>
		</view>
		<view class="tips" :class="[tipClass]">
			<slot name="tips"></slot>
		</view>
	</view>
</template>

<script>
/*
 * prop {String} type loading样式  circle/blow/organ/cube
 * prop {String} bgColr 背景颜色
 * prop {Boolean} visible 传入布尔控制显示
 * prop {number} duraction 提示持续时间 
 * slot {name = tips} loading框关闭之前的提示插槽 必须搭配duraction才有效果
 * 可以通过theme.scss文件中的$g-loading来定制颜色
 */	
export default {
	name:'g-loading',
	data() {
		return {
			loadingClass:'g-loading-hide',
			tipClass:'tips-hide',//提示框的样式
			loadingHide:'loading-icon-hide',//解决隐藏重影
			timeOrder:0
		};
	},
	props: {
		type:{
			type:String,
			default:'cube'
		},
		bgColr:{
			type:String,
			default:'#f4f4f4'
		},
		visible:{
			type:Boolean,
			default:false
		},
		duraction:{
			type:Number
		}
	},
	watch:{
		visible(){
			/*
			监听visible，为true时打开 为false时 在有duraction情况下延时关闭，在没有duraction时，立即关闭
			有slot时关闭的顺序为先关闭提示->关闭loading图标->关闭loading盒子
			在动画延迟时间duraction执行完成之前不可手动改变visible状态
			*/
			let timeId
			clearTimeout(timeId)
			if(this.visible){
				this.loadingHide = `loading-icon-show`
				this.loadingClass =  `g-loading-show`
			}else{
				this.tipClass = `tips-show`
				if(this.duraction){
					timeId = setTimeout(()=>{
						this.tipClass = `tips-hide`
						this.loadingHide = `loading-icon-hide`
						this.loadingClass =`g-loading-hide`
					},this.duraction)
				}else{
					this.loadingHide = `loading-icon-hide`
					this.tipClass = `tips-hide`
					this.loadingClass =`g-loading-hide`
				}
			}
		}
	},
	methods: {
		
	},
	created() {
		
	}
};
</script>
<style scoped lang="scss">
	@import "../../theme.scss";
	.tips{
		@keyframes tipsShow{
			0%{
				width: 0vw;
			}
			50%{

				width: 50vw;

				width: 70vw;

			}
			100%{
				width: 100vw;
			}
		}
		width: 100vw;
		position: absolute;
		height: 80rpx;
		&-hide{
			display: none;
		}
		&-show{
			animation:tipsShow 0.2s linear;
		}
	}
	.loading-icon{
		&-hide{
			opacity: 0;
		}
		&-show{
			opacity: 1;
		}
	}
	.g-loading{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		transition: 0.4s;
		&-show{
			height: 80rpx;
			opacity: 1;
		}
		&-hide{
			height: 0;
			opacity: 0;
		}
	}//
	.sk-circle {
		@-webkit-keyframes sk-circleBounceDelay {
		  0%, 80%, 100% {
		    -webkit-transform: scale(0);
		            transform: scale(0);
		  } 40% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}
		
		@keyframes sk-circleBounceDelay {
		  0%, 80%, 100% {
		    -webkit-transform: scale(0);
		            transform: scale(0);
		  } 40% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}
	  width: 60rpx;
	  height: 60rpx;
	  position: relative;
	  .sk-child {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	  }
	  .sk-child:before {
	    content: '';
	    display: block;
	    margin: 0 auto;
	    width: 15%;
	    height: 15%;
	    background-color:$g-loading;
	    border-radius: 100%;
	    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
		animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	  }
	  .sk-circle2 {
	    -webkit-transform: rotate(30deg);
	        -ms-transform: rotate(30deg);
	            transform: rotate(30deg); 
				}
	.sk-circle3 {
	  -webkit-transform: rotate(60deg);
		  -ms-transform: rotate(60deg);
			  transform: rotate(60deg); }
	 .sk-circle4 {
		-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
				transform: rotate(90deg); }
	 .sk-circle5 {
		-webkit-transform: rotate(120deg);
			-ms-transform: rotate(120deg);
				transform: rotate(120deg); }
	   .sk-circle6 {
		-webkit-transform: rotate(150deg);
			-ms-transform: rotate(150deg);
				transform: rotate(150deg); }
	   .sk-circle7 {
		-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
				transform: rotate(180deg); }
	   .sk-circle8 {
		-webkit-transform: rotate(210deg);
			-ms-transform: rotate(210deg);
				transform: rotate(210deg); }
	  .sk-circle9 {
		-webkit-transform: rotate(240deg);
			-ms-transform: rotate(240deg);
				transform: rotate(240deg); }
	  .sk-circle10 {
		-webkit-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
				transform: rotate(270deg); }
	  .sk-circle11 {
		-webkit-transform: rotate(300deg);
			-ms-transform: rotate(300deg);
				transform: rotate(300deg); }
	   .sk-circle12 {
		-webkit-transform: rotate(330deg);
			-ms-transform: rotate(330deg);
				transform: rotate(330deg); }
				
		 .sk-circle2:before {
		  -webkit-animation-delay: -1.1s;
				  animation-delay: -1.1s; }
		.sk-circle3:before {
		  -webkit-animation-delay: -1s;
				  animation-delay: -1s; }
		.sk-circle4:before {
		  -webkit-animation-delay: -0.9s;
				  animation-delay: -0.9s; }
		.sk-circle5:before {
		  -webkit-animation-delay: -0.8s;
				  animation-delay: -0.8s; }
		 .sk-circle6:before {
		  -webkit-animation-delay: -0.7s;
				  animation-delay: -0.7s; }
		 .sk-circle7:before {
		  -webkit-animation-delay: -0.6s;
				  animation-delay: -0.6s; }
		 .sk-circle8:before {
		  -webkit-animation-delay: -0.5s;
				  animation-delay: -0.5s; }
		 .sk-circle9:before {
		  -webkit-animation-delay: -0.4s;
				  animation-delay: -0.4s; }
		 .sk-circle10:before {
		  -webkit-animation-delay: -0.3s;
				  animation-delay: -0.3s; }
		 .sk-circle11:before {
		  -webkit-animation-delay: -0.2s;
				  animation-delay: -0.2s; }
		.sk-circle12:before {
		  -webkit-animation-delay: -0.1s;
				  animation-delay: -0.1s; }
					
	}
	
	.blow {
	  width: 140rpx;
	  text-align: center;
	 view {
	   width: 28rpx;
	   height: 28rpx;
	   margin: 0 6rpx;
	    background-color: $g-loading;
	    border-radius: 100%;
	    display: inline-block;
	    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	  }
	  .bounce1 {
	    -webkit-animation-delay: -0.32s;
	    animation-delay: -0.32s;
	  }
	  .bounce2 {
	    -webkit-animation-delay: -0.16s;
	    animation-delay: -0.16s;
	  }
	  @-webkit-keyframes sk-bouncedelay {
	    0%, 80%, 100% { -webkit-transform: scale(0) }
	    40% { -webkit-transform: scale(1.0) }
	  }
	  @keyframes sk-bouncedelay {
	    0%, 80%, 100% { 
	      -webkit-transform: scale(0);
	      transform: scale(0);
	    } 40% { 
	      -webkit-transform: scale(1.0);
	      transform: scale(1.0);
	    }
	  }
	}
	
	//风琴样式
	.organ {
		@-webkit-keyframes sk-stretchdelay {
		  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
		  20% { -webkit-transform: scaleY(1.0) }
		}
		
		@keyframes sk-stretchdelay {
		  0%, 40%, 100% { 
		    transform: scaleY(0.4);
		    -webkit-transform: scaleY(0.4);
		  }  20% { 
		    transform: scaleY(1.0);
		    -webkit-transform: scaleY(1.0);
		  }
		}
	 width: 60rpx;
	 height: 60rpx;
	  text-align: center;
	  font-size: 20rpx;
	  view {
	    background-color: $g-loading;
	    height: 100%;
	    width: 12rpx;
	    display: inline-block;
	    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	    animation: sk-stretchdelay 1.2s infinite ease-in-out;
	  }
	  .rect2 {
	    -webkit-animation-delay: -1.1s;
	    animation-delay: -1.1s;
	  }
	  .rect3 {
	    -webkit-animation-delay: -1.0s;
	    animation-delay: -1.0s;
	  }
	  .rect4 {
	    -webkit-animation-delay: -0.9s;
	    animation-delay: -0.9s;
	  }
	  .rect5 {
	    -webkit-animation-delay: -0.8s;
	    animation-delay: -0.8s;
	  }
	  
	}
	//风琴样式
	.cube {
		@-webkit-keyframes sk-foldCubeAngle {
		  0%, 10% {
		    -webkit-transform: perspective(140px) rotateX(-180deg);
		            transform: perspective(140px) rotateX(-180deg);
		    opacity: 0; 
		  } 25%, 75% {
		    -webkit-transform: perspective(140px) rotateX(0deg);
		            transform: perspective(140px) rotateX(0deg);
		    opacity: 1; 
		  } 90%, 100% {
		    -webkit-transform: perspective(140px) rotateY(180deg);
		            transform: perspective(140px) rotateY(180deg);
		    opacity: 0; 
		  } 
		}
		
		@keyframes sk-foldCubeAngle {
		  0%, 10% {
		    -webkit-transform: perspective(140px) rotateX(-180deg);
		            transform: perspective(140px) rotateX(-180deg);
		    opacity: 0; 
		  } 25%, 75% {
		    -webkit-transform: perspective(140px) rotateX(0deg);
		            transform: perspective(140px) rotateX(0deg);
		    opacity: 1; 
		  } 90%, 100% {
		    -webkit-transform: perspective(140px) rotateY(180deg);
		            transform: perspective(140px) rotateY(180deg);
		    opacity: 0; 
		  }
		}
	  width: 40rpx;
	  height: 40rpx;
	  position: relative;
	  -webkit-transform: rotateZ(45deg);
	          transform: rotateZ(45deg);
	.sk-cube {
	  float: left;
	  width: 50%;
	  height: 50%;
	  position: relative;
	  -webkit-transform: scale(1.1);
		  -ms-transform: scale(1.1);
			  transform: scale(1.1); 
	}
	.sk-cube:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: $g-loading;
	  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
			  animation: sk-foldCubeAngle 2.4s infinite linear both;
	  -webkit-transform-origin: 100% 100%;
		  -ms-transform-origin: 100% 100%;
			  transform-origin: 100% 100%;
	}
	.sk-cube2 {
	  -webkit-transform: scale(1.1) rotateZ(90deg);
			  transform: scale(1.1) rotateZ(90deg);
	}
	.sk-cube3 {
	  -webkit-transform: scale(1.1) rotateZ(180deg);
			  transform: scale(1.1) rotateZ(180deg);
	}
	.sk-cube4 {
	  -webkit-transform: scale(1.1) rotateZ(270deg);
			  transform: scale(1.1) rotateZ(270deg);
	}
	.sk-cube2:before {
	  -webkit-animation-delay: 0.3s;
			  animation-delay: 0.3s;
	}
	.sk-cube3:before {
	  -webkit-animation-delay: 0.6s;
			  animation-delay: 0.6s; 
	}
	.sk-cube4:before {
	  -webkit-animation-delay: 0.9s;
			  animation-delay: 0.9s;
	}
	}
</style>
